<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->

    <el-row style="padding-top: 10px" v-loading="loading">
      <div class="editmain">
        <el-card style="width:49%;">
          <el-col :span="24" style="padding:0 5px">
            <div class="title">原始诉求<div class="rig" style="color:#999;">内容不可编辑</div></div>
            <el-form style="width:95%;" :rules="rules" ref="ruleForm" :model="original" label-width="150px" size="small">
              <el-form-item label="企业名称">
                <el-input v-model="original.company" :disabled="true" placeholder="请输入企业名称"></el-input>
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="original.user" :disabled="true" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="original.phone" :disabled="true" placeholder="请输入联系电话"></el-input>
              </el-form-item>
              <el-form-item label="诉求分类">
                <el-input v-model="original.title" :disabled="true" placeholder="请输入诉求标题"></el-input>
              </el-form-item>
              <el-form-item label="企业地址">
                <el-input v-model="original.address" :disabled="true" placeholder="请输入企业地址"></el-input>
              </el-form-item>
              <el-form-item label="诉求内容" style="width:100%;">
                <el-input type="textarea" :disabled="true" v-model="original.content" rows="8" placeholder="请输入诉求内容"></el-input>
              </el-form-item>
    
              <el-form-item label="来源" style="width:100%;">
                <el-radio-group v-model="original.from">
                  <el-radio v-for="(item,index) in originArr" :disabled="true" :label="item.label" :value="item.value" :key="index">{{item.name}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="上传" style="width:100%;">
          
                <li v-for="(list,index) in sup_attach" :key="index">
                  <a :href="httpHome+list.url" target="_blank" :download="list.name">{{list.name}}</a>
                </li>
              </el-form-item>
            </el-form>
      
        </el-col>
        </el-card>
        <el-card style="width:49%;">
          <el-col :span="24" style="padding:0 5px">
            <div class="title">补充诉求<div class="rig" style="color:#999;">内容可编辑</div></div>
            <el-form style="width:95%;" :rules="rules" ref="ruleForm" :model="EditForm" label-width="150px" size="small">
              <el-form-item label="企业名称" prop="company">
                <el-input v-model="EditForm.company" placeholder="请输入企业名称"></el-input>
              </el-form-item>
              <el-form-item label="联系人" prop="user">
                <el-input v-model="EditForm.user" placeholder="请输入联系人"></el-input>
              </el-form-item>
              <el-form-item label="手机号码" prop="phone">
                <el-input v-model="EditForm.phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>
              <el-form-item label="座机号码" prop="tel">
                <el-input v-model="EditForm.tel" placeholder="请输入座机号码"></el-input>
              </el-form-item>
              <div class="flexblock">
                <el-form-item label="诉求分类" prop="group">
                  <el-select v-model="EditForm.group" placeholder="诉求分类" @change="groudChange">
                    <el-option v-for="(item,index) in MsgGroup" :label="item.name" :value="item.id" :key="index"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="企业地址" prop="areas">
                  <el-cascader
                    expand-trigger="hover"
                    :options="areaOptions"
                    v-model="EditForm.areas"
                    >
                  </el-cascader>
                  
                </el-form-item>
              </div>
              
              <el-form-item label="详细地址" prop="address">
                  <el-input v-model="EditForm.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
              <el-form-item label="经纬度" style="width:100%;" class="area">
                <el-input v-model="EditForm.longitude" placeholder="请输入经度"></el-input>
                <el-input v-model="EditForm.latitude" placeholder="请输入纬度"></el-input>
              </el-form-item>
              <el-form-item label="经营行业">
                <el-cascader
                style="width:100%;"
                  expand-trigger="hover"
                  :options="selectOptions"
                  v-model="EditForm.selectedOptions"
                  @change="groupselect"
                  >
                </el-cascader>
              </el-form-item>
              <el-form-item label="补充内容" style="width:100%;" prop="supplement">
                <el-input type="textarea" v-model="EditForm.supplement" rows="5" placeholder="请输入诉求内容"></el-input>
              </el-form-item>
              
              <el-form-item label="来源" style="width:100%;">
                <el-radio-group v-model="EditForm.from">
                  <el-radio v-for="(item,index) in originArr" :label="item.label" :value="item.value" :key="index">{{item.name}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="上传" style="width:100%;">
                <el-upload
                  class="upload-demo"
                  :action="httpHome+'direct/Massage/uploadFile'"
                  :on-change="handleUpload"
                  :on-success="fileSuccess"
                  :file-list="fileList3"
                  :before-upload="beforeupload"
                  :before-remove="handlemove"
                  >
                  <el-button size="small" type="primary">上传附件</el-button>
                  <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
                </el-upload>
              </el-form-item>
            </el-form>
        </el-col>
        </el-card>
      </div>
      <el-col :span="24" style="padding:0 5px;margin-top:30px;">
        <el-card>
          <div class="title">移交</div>

          <select-menu :sname="sname" ref="mesage" :options="options" :dynamicValidateForm="dynamicValidateForm" v-on:changename="update"></select-menu><!--市级部门-->
          <select-menu :sname="sname2" ref="mesage2" :options="optionsArea" :dynamicValidateForm="dynamicValidateFormArea" v-on:changename="updateArea"></select-menu><!--县长热线-->

          <over-time ref="over" :times="overtime"></over-time>
        
        </el-card>

      </el-col>
      <el-col :span="24" style="margin-top:30px;" class="">
        <!-- <el-button size="small" class="marbtn" type="primary" style="width:min-content;">催办</el-button> -->

        <el-button size="small" type="primary" @click="moveTo('ruleForm')">移交</el-button>
        <el-button size="small" type="primary" @click="saveForm('ruleForm')">保存</el-button>
        <!-- <el-button size="small" type="primary" @click="leaveForm()">取消</el-button> -->
        <el-button size="small" class="marbtn" @click="$router.go(-1)" style="width:min-content;" type="warning">返回</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<script>

Array.prototype.del = function (filter) {
        var index = filter;
        if (typeof filter == 'function') {
            for (var i = 0; i < this.length; i++) {
                if (filter(this[i], i)) index = i;
            }
        }
        this.splice(index, 1)
    };


  import actionurl from '@/assets/js/actionurl'
  import selectMenu from '@/components/selectMenu.vue'
  import config from '../../config';
  import overTime from "@/components/overTime.vue";
  export default {
    name: 'questionAdd',
    components:{
      selectMenu,
      overTime
    },
    data() {
      return {
        sup_attach:[],
        thisTitle:'',//诉求分类标题
        groupID:'',//诉求分类ID
        selectOptions:[],
        areaOptions:[],
        originArr:[
          {
            label:'0',
            value:'0',
            name:'微信'
          },
          {
            label:'1',
            value:'1',
            name:'热线'
          },
          {
            label:'2',
            value:'2',
            name:'平台'
          },
          {
            label:'3',
            value:'3',
            name:'在线客服'
          },
          {
            label:'4',
            value:'4',
            name:'民营经济分析系统'
          },
          {
            label:'5',
            value:'5',
            name:'面对面帮扶'
          },
          {
            label: "7",
            value: "7",
            name: "线下服务"
          }
        ],
        overtime:'',
        httpHome:'',
        loading:false,
        MsgGroup:[],
        cityArr:[],
        countyArr:[],
        filePath:'',
        fileArr:[],
        FileName:'',
        sname:'市级部门',
        sname2:'县长热线',
        EditForm: {

        },
        original:{},
        dynamicValidateForm: {
          domains: [{
            value: '运维',
            id:'0'
          }],
          selectList: [{
            value: '选择',
            id: '0'
          }]
        },
        options: [],
        dynamicValidateFormArea: {
          domains: [{
            value: '河北',
            id:'0'
          }],
          selectList: [{
            value: '',
            id: ''
          }]
        },
        optionsArea:[],
        fileList3: [],

        rules: {
         company: [
            { required: true, message: '请输入公司名称', trigger: 'blur' },
            { min: 2,  message: '长度在2字符以上', trigger: 'blur' }
          ],
          user: [
            { required: true, message: '请输入公司联系人', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          title: [
            { required: true, message: "请输入标题", trigger: "blur" }
          ],
          supplement: [
            { required: true, message: "请输入补充内容", trigger: "blur" }
          ],
          address: [
            { required: true, message: "请输入地址", trigger: "blur" }
          ],
          areas:[
            { required: true, message: "请输选择地区", trigger: "change" }

          ]
        },
        mesage:'',
        mesage2:'',
        groupChildId:''
      }
    },
    created() {
      this.getQuestionDetail();
      this.GetTargetList();
      this.GetMsgGroup();
      this.httpHome = config.URLWEBHTTP;
    },
   
    methods: {
      groupselect(values){//行业选择事件
        var fatherArr = this.selectOptions.filter(item => item.value==values[0] );
        this.groupChildId = fatherArr[0].children.filter(item => item.value==values[1])[0].value
        // console.log(fatherArr[0].children.filter(item => item.value==values[1]));
      },
      groudChange(values){//诉求分类change事件
        this.groupID = values
        this.thisTitle = this.MsgGroup.filter(item => item.id==values )[0].name;
      },
      getGroupList(){//获取企业分类
        var _this = this;
        actionurl.getLibraryGroupList({}, function(re) {
            _this.selectOptions = re.data;
            
          }
        );
      },
      handleChange(value){//企业分类选择事件
        console.log(value);
      },
      getAreaList(){//获取地区接口
        var _this = this;
        actionurl.getDirectArea({}, function(re) {
            _this.areaOptions = re.data.children;
          }
        );
      },
      leaveForm(){
        this.$router.back(-1);
      },
      update(name) {
        //获取市级增加的菜单数组
        
        this.cityArr = name;
        if(name.length>0){
          this.mesage = name.join(',');
        }else{
          this.mesage = '';
        }
      },
      updateArea(name) {
        //获取区县级增加的菜单数组
        this.countyArr = name;
        if(name.length>0){
          this.mesage2 = name.join(',');
        }else{
          this.mesage2 = '';
        }
      },
      updateArea(name){//获取区县级增加的菜单数组
        this.countyArr = name;
      },
      moveTo(formName){//移交操作
        if(this.$refs.mesage.getContent().length == 0 && this.$refs.mesage2.getContent().length == 0){
          this.$message.error('请选择县长热线或者请选择市级部门');
          return;
        }
        var _this = this;

        _this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.loading = true;
            actionurl.editAndTransfer({
                id:_this.$route.params.id,
                phone:_this.EditForm.phone,
                company:_this.EditForm.company,
                user:_this.EditForm.user,
                title:_this.thisTitle,
                content:_this.EditForm.content,
                supplement:_this.EditForm.supplement,
                from:_this.EditForm.from,
                address:_this.EditForm.address,
                city:_this.$refs.mesage.getContent().join(','),
                county:_this.$refs.mesage2.getContent().join(','),
                attach:_this.filePath,
                group:_this.groupID,
                final_time: _this.$refs.over.getContent(),
                area:_this.EditForm.areas[0],
                villages:_this.EditForm.areas[1],
                com_group:_this.groupChildId,
                tel:_this.EditForm.tel,
                longitude:_this.EditForm.longitude,
                latitude:_this.EditForm.latitude
              }, function(re) {
                _this.loading = false;
                _this.$message(re.msg);
                // setTimeout(function(){
                //   _this.$router.go(-1);
                // },1000);
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getQuestionDetail(){//获取编辑详情信息
        var _this = this;
        actionurl.MgetEditInfo({
            id:_this.$route.params.id,
            
          }, function(re) {
            console.log(re.original);
            _this.getGroupList();//获取分类
            _this.getAreaList();//获取地区接口
            if(re.status = 1){
              _this.EditForm = {
                company:re.data.company,
                content:re.data.content,
                supplement:re.data.supplement,
                from:re.data.from.toString(),
                user:re.data.user,
                address:re.data.address,
                phone:re.data.phone,
                title:re.data.title,
                group:re.data.group,
                
                tel:re.data.tel,
                latitude:re.data.latitude,
                longitude:re.data.longitude,
              };
              //旧数据
              _this.original = {
                company:re.original.company,
                content:re.original.content,
                supplement:re.original.supplement,
                from:re.original.from.toString(),
                user:re.original.user,
                address:re.original.address,
                phone:re.original.phone,
                title:re.original.title,
                group:re.original.group,
                
                tel:re.original.tel,
                latitude:re.original.latitude,
                longitude:re.original.longitude,
              };
              if(re.data.area){
                _this.EditForm.areas=[re.data.area,re.data.villages];
              }
              if(re.data.com_group_first){
                _this.EditForm.selectedOptions = [re.data.com_group_first,re.data.com_group];
              }
              _this.sup_attach = JSON.parse(re.data.attach);
        
              _this.groupChildId = re.data.com_group;
              _this.thisTitle = re.data.title;
              _this.groupID = re.data.group;
              if(!re.data.from){//如果没有选择来源，默认选择第一个
                _this.EditForm.from = '0'
              }
              _this.dynamicValidateForm = {
                domains:re.data.city,
                selectList: [{
                  value: '选择',
                  id: '0'
                }]
              };
              _this.dynamicValidateFormArea = {
                domains: re.data.county,
                selectList: [{
                  value: '选择',
                  id: '0'
                }]
              };

              if(re.data.attach=='null'){
                _this.fileList3=[];
              }else{
                _this.fileList3 = JSON.parse(re.data.attach);

              }
              _this.overtime = re.data.final_time;
            }else{
              _this.$message(re.msg);
            }       
        });
      
      },
      saveForm(formName){
        var _this = this;
        _this.$refs[formName].validate((valid) => {
          if (valid) {
            _this.editFormFn();
            setTimeout(function(){
            _this.$router.go(-1);              
            },1000);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      GetTargetList(){//获取区县以及市级下拉菜单获取
        var _this = this;
        actionurl.targetListByType({
          }, function(re) {

            _this.options = re.data.city;
            _this.optionsArea = re.data.county;
  
        });
      },
      editFormFn(){
        var _this = this;
        _this.loading = true;
        actionurl.userEdit({
            id:_this.$route.params.id,
            phone:_this.EditForm.phone,
            company:_this.EditForm.company,
            user:_this.EditForm.user,
            title:_this.thisTitle,
            content:_this.EditForm.content,
            supplement:_this.EditForm.supplement,
            from:_this.EditForm.from,
            address:_this.EditForm.address,
            city:_this.$refs.mesage.getContent().join(','),
            county:_this.$refs.mesage2.getContent().join(','),
            attach:JSON.stringify(_this.fileList3),
            group:_this.groupID,
            final_time: _this.$refs.over.getContent(),
            area:_this.EditForm.areas[0],
            villages:_this.EditForm.areas[1],
            com_group:_this.groupChildId,
            tel:_this.EditForm.tel,
            longitude:_this.EditForm.longitude,
            latitude:_this.EditForm.latitude
          }, function(re) {
            _this.loading = false;
            if(!re.data){
              _this.$message(re.msg); 
            }else{
              _this.$message(re.msg);
            }
            
        });
      },
      GetMsgGroup(){
        var _this = this;
        actionurl.MessageGroup({
            mesgroup:1,//0-面对面等分类 1-八大类 
            fid:1
          }, function(re) {
            _this.MsgGroup=re.data;
        });
      },
      handleUpload(file, fileList) {
        // this.fileList3 = fileList.slice(fileList.length);

        // this.filePath = file.response.data.path;
        
      },
      beforeupload(file) {
        
      },
      handlemove(file, fileList){
        this.loading = true;
        var data = this.fileList3.filter(function (item) {
          return item.uid == file.uid;
        })
        
        this.fileList3.del(function (obj) {
            return obj.uid == data;
        });
       
        var _this = this;
        _this.editFormFn();
        _this.fileRemove(file, _this.fileList3);
      },
      fileSuccess(event, file, fileList){
        console.log(this.fileList3);
        if(file.response.status=='0'){
          var obj={};
          obj.name = file.name;
          obj.url =  file.response.data.path
          this.fileList3.push(obj);
        }
        
        
      },
      fileRemove(file, fileList){
        var _this = this;
        actionurl.delfile({
            file:file.url
          }, function(re) {
            if(re.status=1){
              _this.$message(re.msg);
             
            }else{
              _this.$message(re.msg);
            }
        });
      }
      

    },
    mounted() {
      $('.selectinput').find('input').each(function(){
        var length = $(this).val().length;
        $(this).css('width',length*15+40);
      });
      
    }
  }


</script>
<style scoped lang="scss">
  .btnflex {
    display: flex;
    position: relative;

    // .add{
    //   position: absolute;
    //   right: 0;
    //   top: 0;
    // }
    p {
      margin-right: 20px;
    }
  }
.el-form--inline.selectinput .el-form-item{
  position: relative;
}
.el-form--inline.selectinput .el-form-item:after{
   width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #f00 transparent transparent;
  position: absolute;
  right:0;
  top: 1px;
  z-index: 1;
}
.el-form--inline.selectinput{
  padding-left: 20px;
}
.el-form--inline.selectinput .el-form-item .el-input__inner{
  text-align: center;
}
.el-form--inline.selectinput .el-form-item .el-icon-close{
 position: absolute;
  right:0;
top: 1px;
color: #FFF;
font-size: 12px;
text-align: center;
z-index: 2;
}
label{
  display: inline-block;
  text-align: right;
  padding: 0 12px 0 0;
}
.w50-form-inline{
  display: flex;
  flex-wrap: wrap;
  width:95%;
  .el-form-item{
    width: 44%;
  }
}
.editmain{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

a{
  color: #444;
}
</style>
